<template>
  <div class="container">
    <el-row v-if="data">
      <el-col :span="10" class="left">
        <div class="img-box img1" :style="{
          backgroundImage: `url(${data.img})`,
        }">
          <img :src="data.img" alt="新闻配图">
        </div>
      </el-col>
      <el-col :span="14" class="right">
        <div style="width: 80%; ">
          <template v-if="props.type === 'internally'">
            <!-- eslint-disable-next-line -->
            <component v-for="(c, index) in data.meta" :key="index" v-html="c.text" :is="c.element" :="c"></component>
          </template>
          <tempalte v-else-if="props.type === 'slot'">
            <slot></slot>
          </tempalte>
        </div>
      </el-col>
    </el-row>
    <div v-else style="height: 400px;">
      未找到该内容
    </div>
  </div>
  <AppFooter></AppFooter>

</template>

<script setup>
import jsonData from "./data.json"
import { ref } from "vue";
import { useRoute } from "vue-router"
const route = useRoute();
const foodId = route.params.id;
// 是否加载中
const loading = ref(false);
defineOptions({ name: 'HongShaoRou' })
const props = defineProps({
  // [internally, slot]
  // 限定这个组件的数据从何而来 
  // [internally] 从data.json读取
  // [slot] props传递图片+默认插槽内容
  type: {
    type: String,
    default: "internally"
  },
  imgSrc: String,
})

const data = ref();
if (props.type === "internally") {
  const currentData = jsonData[foodId];
  loading.value = true;
  if (currentData) {
    data.value = currentData;
  } else {
    data.value = null;
  }
  loading.value = false;
}
</script>

<style lang="scss" scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;

}

.container {
  color: #eee;
  position: relative;
  margin: 120px auto;
  padding: 20px;
  // background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .title {
    font-size: 28px;
    margin-bottom: 20px;
  }


  .left {
    display: flex;
    justify-content: center;
    align-items: center;

    .img-box {
      position: relative;
      height: 600px;
      width: 80%;
      display: flex;
      justify-content: center;
      align-items: center;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #00000050;
        backdrop-filter: blur(40px);
      }

      img {
        position: relative;
        z-index: 1;
        width: 100%;
      }
    }

    //   .img1 {
    //     backgroundImage: url(${data.img})
    // }

  }

  .right {
    display: flex;
    justify-content: center;

    .meta {
      color: #666;
      font-size: 14px;
      margin-bottom: 20px;
    }

    p {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 10px;
      text-indent: 2em;
    }

    img {
      clear: both;
      display: block;
      margin: 50px auto;
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 20px;

      &:first-child {
        margin-top: 0 !important;
      }
    }
  }
}
</style>